<template>
	<Loading v-if="countdown <= 60 && countdown > 0"></Loading>

	<view style="background-color: #ececec;" v-else-if="countdown === 0">
		<view class="header">
			<view class="text-and-image" @click="goxiugai">
				<view class="image-container">
					<image
						src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7">
					</image>
				</view>
				<view class="text-container">
					<text>11111</text>
				</view>

			</view>


		</view>
		<view style="height: 75vh;
	">

			<view style="    margin: 0 10px;
		height: 110px;
		border-radius: 11px;
		background-color: white; margin-bottom: 20px;">
				<view style="    padding: 10px 30px 0px 12px;">我的订单</view>
				<view style="       margin-top: -21px;
    font-size: 14px;
      margin-left: 327px;

    color: #afafaf;" @click="goquanbudingan">全部订单 ></view>
				<view class="section white">
					<view class="item" @click="gopeifangyuanliao">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713378292e7d2e242f282f28257e2c2f2f7e2f2e7d792d297e292c297f792f2a782f78292f257e787e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">待付款</view>
					</view>
					<view class="item" @click="gopeifangyuanliao">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713378292e7d2e242f282f28257e2c2f2f7e2f2e7d792d297e292c297f792f2a782f78292f257e787e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">待发货</view>
					</view>

					<view class="item" @click="goZhiKa">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713378292e7d2e242f282f28257e2c2f2f7e2f2e7d792d297e292c297f792f2a782f78292f257e787e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">待收货</view>
					</view>
					<view class="item">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713378292e7d2e242f282f28257e2c2f2f7e2f2e7d792d297e292c297f792f2a782f78292f257e787e7a32766c7b.png"
								class="icon-img" @click="goYaoqingyouyli"></image>
						</view>
						<view class="text">待评价</view>
					</view>

				</view>
			</view>






			<view style="    margin: 0 10px;
		height: 263px;
		border-radius: 11px;
		background-color: white;">
				<view style="    padding: 10px 30px 0px 12px;">更多服务</view>
				<view class="section white">
					<view class="item" @click="gopeifangyuanliao">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713325252e2e2b2e2c792c7f7a2f782b7f7d2e79782c782a2d25792e2d7a7e792c252a7e2a2f7d257e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">出行人</view>
					</view>
					<view class="item" @click="gopeifangyuanliao">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713325252e2e2b2e2c792c7f7a2f782b7f7d2e79782c782a2d25792e2d7a7e792c252a7e2a2f7d257e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">完善资料</view>
					</view>

					<view class="item" @click="goZhiKa">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713325252e2e2b2e2c792c7f7a2f782b7f7d2e79782c782a2d25792e2d7a7e792c252a7e2a2f7d257e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">协议政策</view>
					</view>
					<view class="item">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f73713325252e2e2b2e2c792c7f7a2f782b7f7d2e79782c782a2d25792e2d7a7e792c252a7e2a2f7d257e7a32766c7b.pngg"
								class="icon-img" @click="goYaoqingyouyli"></image>
						</view>
						<view class="text">商家入驻</view>
					</view>

				</view>
				<view class="section white">
					<view class="item" @click="gopeifangyuanliao">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f737133292b2879252e2924782d2c257e2f78792e2a782f2c782c2b787f7e7a2a7f242d242c2c7d287f2b2932766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">电话咨询</view>
					</view>
					<view class="item" @click="gopeifangyuanliao">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f7371332c787a2f782b7f7d2b7e7f7e2c7d282a7d292c282a2e292a2b7e2a2f7a2a2e282a7e2a2c7d7a7e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">在线客服</view>
					</view>

					<view class="item" @click="goZhiKa">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f7371332c787a2f782b7f7d2b7e7f7e2c7d282a7d292c282a2e292a2b7e2a2f7a2a2e282a7e2a2c7d7a7e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">山水社群</view>
					</view>
					<view class="item">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f737133782a7f7d2b7e7f7e2c7d282a7a2e2d7a792a2d2e7e2b2f7f792a2e282a7e2a2c2c7f2f2f7d797e7a32766c7b.png"
								class="icon-img" @click="goYaoqingyouyli"></image>
						</view>
						<view class="text">学生认证</view>
					</view>

				</view>

				<view class="section white">
					<view class="item" @click="gopeifangyuanliao">
						<view class="icon">
							<image
								src="https://files.superbed.cn/proxy/7468686c6f2633336b776c74736873327f7872327e7f797e736f327f737133782a7f7d2b7e7f7e2c7d282a7a2e2d7a792a2d2e7e2b2f7f792a2e282a7e2a2c2c7f2f2f7d797e7a32766c7b.png"
								class="icon-img">
							</image>
						</view>
						<view class="text">意见反馈</view>
					</view>
					<view class="item" @click="gopeifangyuanliao">

					</view>
					<view class="item" @click="gopeifangyuanliao">

					</view>
					<view class="item" @click="gopeifangyuanliao">

					</view>
				</view>
			</view>

		</view>
	</view>


</template>

<script>
	import {
		ref,
		onMounted,
		computed,
		onUnmounted,
		toRaw
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		Loading
	} from '../Loading/Loading.vue';
	import {
		url
	} from '@/utils/request.js';
	export default {
		components: {
			Loading
		},
		data() {
			return {
				countdown: 2,
				userName: '请登录',
				userAvatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7',
				password: '',
				phone: ''
			};
		},
		onLoad() {
			let interval = setInterval(() => {
				this.countdown--;
				if (this.countdown === 0) {
					clearInterval(interval);
				}
			}, 1000);
		},
		onShow() {

		},
		methods: {
			goquanbudingan() {
				uni.navigateTo({
					url: '../quanbuorders/quanbuorders'
				})
			}
		}
	};
</script>
<style lang="scss">
	.section {
		padding: 10px;
		// margin-bottom: 10px;
	}

	.yellow {
		background-color: white;
		display: flex;
		justify-content: space-between;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.description {
		font-size: 14px;
		color: #666;
	}

	.white {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		// border-radius: 8px;
	}

	.item {
		flex: 1;
		text-align: center;
		margin: 0 5px;
	}

	.item.large {
		flex: 2;
	}

	.item.small {
		flex: 1;
	}

	.icon {
		margin-bottom: 5px;
	}

	.icon-img {
		width: 30px;
		height: 30px;
	}

	.icon-imgs {
		width: 43px;
		height: 43px;
	}

	.header {
		height: 132px;
		background-image: url('https://zjdemo.xuande.work:8889/photo/a72ca3aa6854491ca7613be9c4c45f5e.png');
		background-size: cover;
		background-position: center;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 20px;
	}

	.text-and-image {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-container {
		font-size: 20px;
		color: black;
		font-weight: bold;
	}

	.image-container {
		display: flex;
		align-items: center;
	}

	.image-container image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.card-container {
		display: flex;
		align-items: center;
		background-size: cover;
		background-position: center;
		padding: 10px;
		border-radius: 10px;
		margin: 12px -3px 0;
		background-image: url('https://zjdemo.xuande.work:8889/photo/c28f84d904af4d8c9c1c22f47f7e9166.png');
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		justify-content: space-between;
	}

	.icon-and-text {
		display: flex;
		align-items: center;
	}

	.card-title {
		font-size: 14px;
		color: #803c00;
		font-weight: bold;
		margin-left: 5px;
	}

	.card-text-container {
		display: flex;
		align-items: center;
	}

	.card-text {
		font-size: 14px;
		color: #803c00;
	}

	.text {
		font-size: 12px;
	}

	.beige {
		background-color: #f5f5dc;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
	}

	.green {
		background-color: #dff0d8;
		text-align: center;
		padding: 20px;
	}

	.center {
		font-size: 16px;
		font-weight: bold;
	}

	// .container {
	// 	display: flex;
	// 	flex-direction: row;
	// 	gap: 20rpx;
	// }

	.left-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.right-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 20rpx;
	}

	.box {
		height: 200rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.boxs {
		width: 350rpx;
		height: 459rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.invite {
		background-color: #f2ead5;
	}

	.join-group {
		background-color: #f4ddcd;
	}

	.happy-money {
		background-color: #e0e6da;
	}

	.title {
		font-size: 24rpx;
		font-weight: bold;
	}

	.description {
		font-size: 20rpx;
	}

	.cover-view {
		position: absolute;
		top: 356px;
		left: 50px;
		padding: 10px;
		z-index: 10;
		color: white;
	}
</style>